<template>
    <div class="foot" v-if=" this.$route.path != '/agApply' && this.$route.path != '/agInfor' && this.$route.path != '/agCation'  && this.$route.path != '/agMent' && this.$route.path != '/agExplain'  && this.$route.path != '/agQuestion' && this.$route.path != '/agLogin' && this.$route.path != '/agProg' && this.$route.path != '/bankCard' && this.$route.path != '/ckCenter' && this.$route.path != '/ckhelp' && this.$route.path != '/selectToShow' && this.$route.path != '/selectType' && this.$route.path != '/txRecommend' && this.$route.path != '/txRecord' && this.$route.path != '/userInfoShow' && this.$route.path != '/vipList' && this.$route.path != '/yjRecord'  && this.$route.path != '/bonusList' && this.$route.path!='/njx' && this.$route.path!='/scddDetails'&& this.$route.path!='/scddPay'" >
        <div class="footer-cnt border-top">
            <ul class="items">
                <li v-for="(item, index) in arr" :key="index" class="item" @click="reload(item.path)" :class="{'cur': curFlag == item.path}">
                    <span :class="['icon-'+index,item.cls]" class="icon iconfont"></span>
                    <span class="txt">{{item.txt}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "FooterPage",
    data() {
        return {
            arr: [
                {
                    path: '/index',
                    txt: '首页',
                    cls: 'icon-shouye'
                },
                {
                    path: '/gwc',
                    txt: '购物车',
                    cls: 'icon-gouwuche'
                },
                {
                    path: '/lybmjl',
                    txt: '已报名',
                    cls: 'icon-baoming'
                },
                {
                    path: '/center',
                    txt: '我的',
                    cls: 'icon-my_icon'
                }
            ],

        }
    },
    computed: {
        curFlag() {
            return this.$route.path
        }
    },
    methods: {
        reload(path) {
            var userToken = localStorage.getItem("token") || '' //用户token值
            if (userToken) {
                if (this.$route.path == path) {
                    window.location.reload()
                } else {
                    this.$router.push(path)
                }
            } else {
                this.$set(this.arr, 1, { path: '/gwc', txt: '购物车', cls: 'icon-gouwuche' })
                this.$set(this.arr, 2, { path: '/lybmjl', txt: '已报名', cls: 'icon-baoming' })
                this.$set(this.arr, 3, { path: '/center', txt: '我的', cls: 'icon-my_icon' })
                if (path == '/index') {
                    if (this.$route.path == path) {
                        window.location.reload()
                        //解决跳转我的和登录的返回问题
                    } else {
                        this.$router.push(path)
                    }
                } else if (path == '/gwc') {
                    if (userToken) {
                        this.$set(this.arr, 1, { path: '/gwc', txt: '购物车', cls: 'icon-gouwuche' })
                        this.$set(this.arr, 2, { path: '/lybmjl', txt: '已报名', cls: 'icon-baoming' })
                        this.$set(this.arr, 3, { path: '/center', txt: '我的', cls: 'icon-my_icon' })
                    } else {
                        this.$set(this.arr, 1, { path: '/gwc', txt: '购物车', cls: 'icon-gouwuche' })
                        path = '/login'
                    }

                    if (this.$route.path == path) {
                        window.location.reload()
                    } else {
                        this.$router.push(path)
                    }
                } else if (path == '/lybmjl') {
                    if (userToken) {
                        this.$set(this.arr, 1, { path: '/gwc', txt: '购物车', cls: 'icon-gouwuche' })
                        this.$set(this.arr, 2, { path: '/lybmjl', txt: '已报名', cls: 'icon-baoming' })
                        this.$set(this.arr, 3, { path: '/center', txt: '我的', cls: 'icon-my_icon' })
                    } else {
                        this.$set(this.arr, 2, { path: '/lybmjl', txt: '已报名', cls: 'icon-baoming' })
                        path = '/login'
                    }

                    if (this.$route.path == path) {
                        window.location.reload()
                    } else {
                        this.$router.push(path)
                    }
                } else if (path == '/center') {
                    if (userToken) {
                        this.$set(this.arr, 1, { path: '/gwc', txt: '购物车', cls: 'icon-gouwuche' })
                        this.$set(this.arr, 2, { path: '/lybmjl', txt: '已报名', cls: 'icon-baoming' })
                        this.$set(this.arr, 3, { path: '/center', txt: '我的', cls: 'icon-my_icon' })
                    } else {
                        this.$set(this.arr, 3, { path: '/center', txt: '我的', cls: 'icon-my_icon' })
                        path = '/login'
                    }

                    if (this.$route.path == path) {
                        window.location.reload()
                    } else {
                        this.$router.push(path)
                    }
                }
            }

        }
    }

}
</script>

<style lang="stylus" scoped>
.foot {
    width: 100%;
    height: 49px;
    overflow: hidden;

    .footer-cnt {
        width: 100%;
        height: 49px;
        font-size: 14px;
        color: #333;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 50;
        overflow: hidden;

        .items {
            width: 100%;
            height: 100%;
            padding-top: 5px;
            box-sizing: border-box;
            display: flex;
            overflow: hidden;

            .item {
                flex: 1;
                height: 100%;
                text-align: center;

                .icon {
                    display: block;
                    width: 100%;
                    height: 26px;
                    line-height: 26px;
                    font-size: 24px;
                    float: left;
                    background-repeat: no-repeat;
                    background-size: auto 100%;
                    background-position: center;
                }

                .txt {
                    display: block;
                    width: 100%;
                    height: 18px;
                    line-height: 18px;
                    float: left;
                    font-size: 11px;
                }
            }

            .router-link-active, .cur {
                color: #aad114;
            }
        }
    }
}
</style>
